<template>
  <div class="dashboard-container">
    <!-- 数据统计卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-header">
            <el-button
              class="view-all-btn"
              type="text"
              @click="$router.push('/user/list')"
            >
              查看全部
            </el-button>
          </div>
          <div class="stat-content">
            <div class="stat-icon">
              <i class="el-icon-user"></i>
            </div>
            <div class="stat-info">
              <div class="stat-title">用户数量</div>
              <div class="stat-value">{{ stats.registerNum || 0 }}人</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-header">
            <el-button
              class="view-all-btn"
              type="text"
              @click="$router.push('/teacher/list')"
            >
              查看全部
            </el-button>
          </div>
          <div class="stat-content">
            <div class="stat-icon">
              <i class="el-icon-user-solid"></i>
            </div>
            <div class="stat-info">
              <div class="stat-title">讲师数量</div>
              <div class="stat-value">{{ stats.teacherNum || 0 }}人</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-header">
            <el-button
              class="view-all-btn"
              type="text"
              @click="$router.push('/course/list')"
            >
              查看全部
            </el-button>
          </div>
          <div class="stat-content">
            <div class="stat-icon">
              <i class="el-icon-notebook-2"></i>
            </div>
            <div class="stat-info">
              <div class="stat-title">课程总数</div>
              <div class="stat-value">{{ stats.courseNum || 0 }}门</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-header">
            <el-button
              class="view-all-btn"
              type="text"
              @click="$router.push('/orders/list')"
            >
              查看全部
            </el-button>
          </div>
          <div class="stat-content">
            <div class="stat-icon">
              <i class="el-icon-s-order"></i>
            </div>
            <div class="stat-info">
              <div class="stat-title">今日订单</div>
              <div class="stat-value">{{ stats.orderNum || 0 }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>


    <!-- 热门课程 -->
    <el-card class="section-card">
      <div slot="header" class="clearfix">
        <span>热门课程</span>
        <el-button
          style="float: right; padding: 3px 0"
          type="text"
          @click="$router.push('/course/list')"
        >
          查看更多
        </el-button>
      </div>
      <el-row :gutter="20" v-if="hotCourses.length > 0">
        <el-col :span="6" v-for="course in hotCourses" :key="course.id">
          <el-card
            :body-style="{ padding: '0px', height: '100%' }"
            shadow="hover"
            class="course-card"
          >
            <div style="display: flex; flex-direction: column; height: 100%">
              <img
                :src="course.cover"
                class="course-image"
                :alt="course.title"
              />
              <div
                style="
                  padding: 14px;
                  flex: 1;
                  display: flex;
                  flex-direction: column;
                "
              >
                <span class="course-title">{{ course.title }}</span>
                <div class="bottom" style="margin-top: auto">
                  <span class="price">¥{{ course.price.toFixed(2) }}</span>
                  <span class="views">
                    <i class="el-icon-user"></i>
                    {{ getRandomViewCount(course.id) }}
                  </span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-empty v-else description="暂无热门课程"></el-empty>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getStatistics, getHotCourses } from "@/api/dashboard";

export default {
  name: "Dashboard",
  data() {
    return {
      stats: {
        registerNum: 0,
        teacherNum: 0,
        courseNum: 0,
        orderNum: 0,
      },
      hotCourses: [],
      recentQuestions: [],
      loading: false,
    };
  },
  computed: {
    ...mapGetters(["role", "nickname"]),
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.loading = true;

      // 获取统计数据
      getStatistics()
        .then((response) => {
          this.stats = response.data.stats;
        })
        .catch((error) => {
          console.error("获取统计数据失败:", error);
          this.$message.error("获取统计数据失败");
        });

      // 获取热门课程
      getHotCourses()
        .then((response) => {
          this.hotCourses = response.data.courses;
        })
        .catch((error) => {
          console.error("获取热门课程失败:", error);
          this.$message.error("获取热门课程失败");
        });
    },
    // 生成随机学习人数
    getRandomViewCount(courseId) {
      // 使用课程ID作为种子确保每次刷新时同一课程显示相同的随机数
      const seed = parseInt(courseId.replace(/\D/g, "")) || 0;
      const random = (seed * 9301 + 49297) % 233280;
      const normalized = random / 233280;

      // 生成1000-50000之间的随机数
      return Math.floor(1000 + normalized * 49000);
    },

    formatDate(dateString) {
      if (!dateString) return "";
      return new Date(dateString).toLocaleString();
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;

  .stats-row {
    margin-bottom: 20px;

    .stat-card {
      margin-bottom: 20px;
      cursor: pointer;
      transition: all 0.3s;
      position: relative; // 添加相对定位
      min-height: 120px; // 确保卡片有足够高度

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.1);
      }

      .stat-header {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 1;
      }

      .view-all-btn {
        padding: 0;
        font-size: 12px;
        color: #999;
        &:hover {
          color: #409EFF;
        }
      }

      .stat-content {
        display: flex;
        align-items: center;
        padding-top: 10px; // 为按钮留出空间

        .stat-icon {
          font-size: 36px;
          color: #409EFF;
          margin-right: 15px;
        }

        .stat-info {
          .stat-title {
            color: #999;
            font-size: 14px;
          }

          .stat-value {
            font-size: 24px;
            font-weight: bold;
          }
        }
      }
    }
  }

  .section-card {
    margin-bottom: 20px;
  }

  .course-card {
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.1);
    }
  }

  .course-image {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
  }

  .course-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .price {
      color: #f56c6c;
      font-weight: bold;
    }

    .views {
      font-size: 12px;
      color: #999;

      i {
        margin-right: 3px;
      }
    }
  }
}
</style>